<section id="inputs">
  <h2>Inputs</h2>

  <form class="flex">
    <p>
      <label for="input">Input without type</label><br />
      <input id="input" placeholder="Placeholder" />
    </p>
    <p>
      <label for="input-text">Input with type="text"</label><br />
      <input type="text" id="input-text" />
    </p>
    <p>
      <label for="input-date">Input with type="date"</label><br />
      <input type="date" id="input-date" />
    </p>
    <p>
      <label for="input-datetime-local">Input with type="datetime-local"</label><br />
      <input type="datetime-local" id="input-datetime-local" />
    </p>
    <p>
      <label for="input-email">Input with type="email"</label><br />
      <input type="email" id="input-email" />
    </p>
    <p>
      <label for="input-month">Input with type="month"</label><br />
      <input type="month" id="input-month" />
    </p>
    <p>
      <label for="input-number">Input with type="number"</label><br />
      <input type="number" id="input-number" />
    </p>
    <p>
      <label for="input-password">Input with type="password"</label><br />
      <input type="password" id="input-password" />
    </p>
    <p>
      <label for="input-search">Input with type="search"</label><br />
      <input type="search" id="input-search" />
    </p>
    <p>
      <label for="input-tel">Input with type="tel"</label><br />
      <input type="tel" id="input-tel" />
    </p>
    <p>
      <label for="input-time">Input with type="time"</label><br />
      <input type="time" id="input-time" />
    </p>
    <p>
      <label for="input-url">Input with type="url"</label><br />
      <input type="url" id="input-url" />
    </p>
    <p>
      <label for="input-week">Input with type="week"</label><br />
      <input type="week" id="input-week" />
    </p>
    <p>
      <span>Input with type="hidden" ;)</span><br />
      <input id="hidden" type="hidden" />
    </p>
  </form>

  <p>
    <strong>Important:</strong> The icons are not available in the lite version of
    the library.
  </p>

  <details class="demo">
    <summary>View code</summary>
    <pre><code>&lt;form class="flex"&gt;
  &lt;p&gt;
    &lt;label for="input"&gt;Input without type&lt;/label&gt;&lt;br /&gt;
    &lt;input id="input" placeholder="Placeholder" /&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;label for="input-text"&gt;Input with type="text"&lt;/label&gt;&lt;br /&gt;
    &lt;input type="text" id="input-text" /&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;label for="input-date"&gt;Input with type="date"&lt;/label&gt;&lt;br /&gt;
    &lt;input type="date" id="input-date" /&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;label for="input-datetime-local"&gt;Input with type="datetime-local"&lt;/label&gt;&lt;br /&gt;
    &lt;input type="datetime-local" id="input-datetime-local" /&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;label for="input-email"&gt;Input with type="email"&lt;/label&gt;&lt;br /&gt;
    &lt;input type="email" id="input-email" /&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;label for="input-month"&gt;Input with type="month"&lt;/label&gt;&lt;br /&gt;
    &lt;input type="month" id="input-month" /&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;label for="input-number"&gt;Input with type="number"&lt;/label&gt;&lt;br /&gt;
    &lt;input type="number" id="input-number" /&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;label for="input-password"&gt;Input with type="password"&lt;/label&gt;&lt;br /&gt;
    &lt;input type="password" id="input-password" /&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;label for="input-search"&gt;Input with type="search"&lt;/label&gt;&lt;br /&gt;
    &lt;input type="search" id="input-search" /&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;label for="input-tel"&gt;Input with type="tel"&lt;/label&gt;&lt;br /&gt;
    &lt;input type="tel" id="input-tel" /&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;label for="input-time"&gt;Input with type="time"&lt;/label&gt;&lt;br /&gt;
    &lt;input type="time" id="input-time" /&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;label for="input-url"&gt;Input with type="url"&lt;/label&gt;&lt;br /&gt;
    &lt;input type="url" id="input-url" /&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;label for="input-week"&gt;Input with type="week"&lt;/label&gt;&lt;br /&gt;
    &lt;input type="week" id="input-week" /&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;span&gt;Input with type="hidden" ;)&lt;/span&gt;&lt;br /&gt;
    &lt;input id="hidden" type="hidden" /&gt;
  &lt;/p&gt;
&lt;/form&gt;</code></pre>
  </details>

  <h3>Input States</h3>
  <form class="flex">
    <p>
      <label for="input-text-standard">Standard</label><br />
      <input type="text" id="input-text-standard" />
    </p>
    <p>
      <label for="input-text-disabled">Disabled</label><br />
      <input type="text" id="input-text-disabled" disabled />
    </p>
    <p>
      <label for="input-text-invalid">Invalid</label><br />
      <input type="text" id="input-text-invalid" required value="" />
    </p>
    <p>
      <label for="input-text-readonly">Read Only</label><br />
      <input type="text" id="input-text-readonly" readonly />
    </p>
  </form>

  <details class="demo">
    <summary>View code</summary>
    <pre><code>&lt;form class="flex"&gt;
  &lt;p&gt;
    &lt;label for="input-text-standard"&gt;Standard&lt;/label&gt;&lt;br /&gt;
    &lt;input type="text" id="input-text-standard" /&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;label for="input-text-disabled"&gt;Disabled&lt;/label&gt;&lt;br /&gt;
    &lt;input type="text" id="input-text-disabled" disabled /&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;label for="input-text-invalid"&gt;Invalid&lt;/label&gt;&lt;br /&gt;
    &lt;input type="text" id="input-text-invalid" required value="" /&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;label for="input-text-readonly"&gt;Read Only&lt;/label&gt;&lt;br /&gt;
    &lt;input type="text" id="input-text-readonly" readonly /&gt;
  &lt;/p&gt;
&lt;/form&gt;</code></pre>
  </details>
</section>


<section>
  <h2>Ranges</h2>
  <p>
    <label for="input-range">Input Range</label><br />
    <input type="range" id="input-range" />
  </p>
  <details class="demo">
    <summary>View code</summary>
    <pre><code>&lt;p&gt;
  &lt;label for="input-range"&gt;Input Range&lt;/label&gt;&lt;br /&gt;
  &lt;input type="range" id="input-range" /&gt;
&lt;/p&gt;</code></pre>
  </details>
</section>

<section>
  <h2>Color Picker</h2>
  <p>
    <label for="input-color">Input Color</label><br />
    <input type="color" id="input-color" />
  </p>
  <details class="demo">
    <summary>View code</summary>
    <pre><code>&lt;p&gt;
  &lt;label for="input-color"&gt;Input Color&lt;/label&gt;&lt;br /&gt;
  &lt;input type="color" id="input-color" /&gt;
&lt;/p&gt;</code></pre>
  </details>
</section>

<section>
  <h2>File input</h2>
  <p>
    <label for="input-file">Input File</label><br />
    <input type="file" id="input-file" />
  </p>
  <details class="demo">
    <summary>View code</summary>
    <pre><code>&lt;p&gt;
  &lt;label for="input-file"&gt;Input File&lt;/label&gt;&lt;br /&gt;
  &lt;input type="file" id="input-file" /&gt;
&lt;/p&gt;</code></pre>
  </details>
</section>

<section class="section">
  <h3>Elements in-line</h3>
  <p>
    <input type="text" aria-label="Test input" />
    <input type="button" value="Button" aria-label="Test button" />
  </p>

  <p>
    <input type="text" aria-label="Test input" />
    <select>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
    </select>
    <input type="button" value="Button" aria-label="Test button" />
  </p>

  <p>
    <select>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
    </select>
    <input type="button" value="Button" aria-label="Test button" />
  </p>

  <details class="demo">
    <summary>View code</summary>
    <pre><code>&lt;p&gt;
  &lt;input type="text" aria-label="Test input" /&gt;
  &lt;input type="button" value="Button" aria-label="Test button" /&gt;
&lt;/p&gt;

&lt;p&gt;
  &lt;input type="text" aria-label="Test input" /&gt;
  &lt;select&gt;
    &lt;option value="1"&gt;Option 1&lt;/option&gt;
    &lt;option value="2"&gt;Option 2&lt;/option&gt;
    &lt;option value="3"&gt;Option 3&lt;/option&gt;
    &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;/select&gt;
  &lt;input type="button" value="Button" aria-label="Test button" /&gt;
&lt;/p&gt;

&lt;p&gt;
  &lt;select&gt;
    &lt;option value="1"&gt;Option 1&lt;/option&gt;
    &lt;option value="2"&gt;Option 2&lt;/option&gt;
    &lt;option value="3"&gt;Option 3&lt;/option&gt;
    &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;/select&gt;
  &lt;input type="button" value="Button" aria-label="Test button" /&gt;
&lt;/p&gt;</code></pre>
  </details>
</section>





